<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
<!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
<div class="arttmpl">
     <!-- 面包屑导航 -->
    <div class="section">
            <div class="location">
            <span>当前位置：</span>
            <a href="/index.html">首页</a> &gt;
            <a href="/goods.html">购物商城</a>
            </div>
    </div>
            <!-- 分类列表  轮播图 置顶商品 -->
        <div class="section">
                <div class="wrapper">
                    <div class="wrap-box">
                        <!--类别菜单-->
                        <div class="left-220" style="margin:0;">
                            <div class="banner-nav">
                                <ul>
                                <!--此处声明下面可重复循环-->
                                 
                                    <li v-for='(item,index) in list.catelist' :key='index'>
                                        <h3>
                                            <i class="iconfont icon-arrow-right"></i>
                                            <span>{{item.title}}</span>
                                            <p>
                                             
                                                <span v-for='subitem in item.subcates' :key='subitem.id'>
                                                    {{subitem.title}}&nbsp;
                                                </span>
                                             
                                            </p>
                                        </h3>
                                        <div class="item-box">
                                            <!--如有三级分类，此处可循环-->
                                            <dl>
                                                <dt><a href="/goods/40.html">{{item.title}}</a></dt>
                                                <dd>
                                                     
                                                    <a v-for='subitem in item.subcates' :key='subitem.id' href="/goods/43.html">{{subitem.title}}</a>
                                                    
                                                     
                                                </dd>
                                            </dl>
                                        </div>
                                    </li>
                                 
                                    
                                 
                                </ul>
                            </div>
                        </div>
                        <!--/类别菜单-->
                         
                        <!--幻灯片-->
                        <div class="left-705">
                            <div class="banner-img">
                                <div id="focus-box" class="focus-box">
                                    <!-- 轮播图,用elment-ui的走马灯组件 :interval 轮播时间 arrow 出现箭头-->
                                    <el-carousel :interval="5000" arrow="always">
                                            <el-carousel-item v-for="itemlist in list.sliderlist" :key="itemlist.id">
                                                <router-link v-bind="{to:'/site/goodsinfo/'+itemlist.id}">
                                                <img height="340" :src="itemlist.img_url" alt="">
                                              <h3>{{ itemlist.title }}</h3></router-link>
                                            </el-carousel-item>
                                    </el-carousel>
                            </div>
                        </div>
                        </div>
                        <!--/幻灯片-->
                         
                        <!--推荐商品-->
                        <div class="left-220">
                            <ul class="side-img-list">
                             
                                <li v-for='(item,index) in list.toplist' :key='item.id' v-if='index<4'>
                                    <div class="img-box">
                                        <label>{{index+1}}</label>
                                        <img v-bind="{'src':item.img_url}">
                                    </div>
                                    <div class="txt-box">
                                        <router-link v-bind="{to:'/site/goodsinfo/'+item.id}" >{{item.title}}</router-link>
                                        <span>{{item.add_time | timefil('YY-MM-DD')}}</span>
                                    </div>
                                </li>
                             
                                
                             
                            </ul>
                        </div>
                        <!--/推荐商品-->
                    </div>
                </div>
            </div>
    
            <!-- 具体模块 -->
            <div class="father" v-for='(item,index) in shoplist' :key='item.level1cateid'>
            <div class="section">
                    
                   <!--子类-->
                   <div class="main-tit">
                   <h2>{{item.catetitle}}</h2>
                   <p>
                    
                   <a v-for='sub_item in item.level2catelist' :key='sub_item.subcateid' href="/goods/43.html">{{sub_item.subcatetitle}}</a>
                   
                    
                   <a href="/goods/40.html">更多
                   <i>+</i>
                   </a>
                   </p>
                   </div>
                   <!--/子类-->
                   <div class="wrapper clearfix">
                   <div class="wrap-box">
                   <ul class="img-list">
                    
                   <li v-for='sonitem in item.datas' :key='sonitem.artID'>
                       <!-- 传ID过去 -->
                        <router-link v-bind="{to:'/site/goodsinfo/'+sonitem.artID}">
                            <div class="img-box">
                                <img :src="sonitem.img_url">
                            </div>
                            <div class="info">
                                <h3 v-text='sonitem.artTitle'></h3>
                                <p class="price"><b>¥{{sonitem.sell_price}}</b>元</p>
                                <p>
                                <strong>库存 {{sonitem.stock_quantity}}</strong>
                                <span>市场价：
                                    <s>{{sonitem.market_price}}</s>
                                </span>
                                </p>
                            </div>
                        </router-link>
                   </li>
                    
                   </ul>
                   </div>
                   </div>
                   </div>
                </div>       

            <!-- 具体模块/ -->

        </div>
</template>

<script>
    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        data() {
            return {
                list: {},
                shoplist: [], //存储下面部分信息
            }
        },
        created() { //在生成dom之前,这个会触发,通常用来发送ajax请求
            this.getlist();
            this.getShopList();
        },
        methods: {
            // 获取下面内容信息
            getShopList() {
                var url = '/site/goods/getgoodsgroup';
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    // 成功
                    this.shoplist = res.data.message;
                })
            },
            //获取顶部三个部分的信息
            getlist() {
                var url = '/site/goods/gettopdata/goods';
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    // 否则成功
                    this.list = res.data.message;
                    // console.log(this.list);
                })
            }
        }
    }
</script>

<style>
    .el-carousel__container {
        height: 343px;
    }
    
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        /* 只需要将line-height修改成50px，文字就自动定位到下面了 */
        line-height: 50px;
        margin: 0;
    }
</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->